import { useEffect, useState } from "react";
import { ResNewSongs } from "../../../../api";
import { Link } from "react-router-dom";
import {PlayCircleOutlined} from '@ant-design/icons'

export default function NewMusic() {
  let [musicList, setMusicList] = useState([]);
  useEffect(async () => {
    try {
      const res = await ResNewSongs();
      setMusicList([...res.result]);   
    } catch (error) {
      console.log(error);
    }
  }, []);
  
  return (
    <div id="NewSongs">
      <span className="pushModuleTitle">最新音乐</span>
      <div id="list">
        {musicList.map((item,index) => {
          return (
            <Link style={{ display: "block" }} to='/song' key={item.id}>
              <div style={{display:'flex'}}>
              <div className="songsDetail">
                <div className='music' >{item.name}</div>
                <div className='singer'>
                  <span className={index%2==0?'quality':''}></span>
                  {item.song.album.artists[0].name}-{item.name}
                  </div>
              </div>
              <div className="playIcon"><PlayCircleOutlined /></div>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}
